<template>
  <transition>
  <div class="app-brand-list">

    <mt-index-list>
      <mt-index-section v-for="(list,listIndex) in carList" :index="list.firstLetter">
        <mt-cell v-for="(item,index) in list.brandList" :title="item.name" :class="{active:curIndex[listIndex]==index}" @click.native="handleFilter(index,listIndex,item)">
          <dl class="factory-list" v-for="f in item.factoryList">
            <dt class="factory-header">{{f.name}}</dt>
            <dd class="factory-item" v-for="chexi in f.seriesList" @click="handleOpen(chexi)">{{chexi.name}}</dd>
          </dl>
        </mt-cell>
      </mt-index-section>
    </mt-index-list>

    <mt-popup
      v-model="popupResult"
      position="right"
      class="chexing">
      <dl class="model-list" style="padding: 0;">
        <dt class="model-header">{{carXiName}}</dt>
        <dd class="model-item" v-for="item in carModelList" @click="handlSelect(item)">{{item.name}}</dd>
      </dl>
    </mt-popup>
  </div>
    </transition>
</template>

<script>
  import { Header,Cell,IndexList, IndexSection,Indicator} from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  data () {
    return {
      currentActive: -1,
      popupResult:false,
      curIndex: [],
      carList: [],
      carModelList:[],
      carBrandName:'',
      carFactoryName:'',
      carXiName:'',
    }
  },
  mounted: function () {
    Indicator.open({
      text: '加载中...',
      spinnerType: 'snake'
    });
    this.getData();
  },
  methods: {

    /** 获取车型列表 **/
    getData() {

      this.$axios({
        method: 'post',
        url:'gp/declaration/getCarList',
      }).then((res)=>{
        if(res.data.statusCode==200){
        Indicator.close();
        console.log(res.data.object)
        this.carList=res.data.object;
        for (var i = 0; i < this.carList.length; i++) {
          //放入数组
          this.curIndex.push(-1);
        }
      }
    })
    },

    handleOpen(item){
      this.carModelList=[];
      this.popupResult=true;
      console.log(item)
      this.carXiName=item.name;
      var params = new URLSearchParams();
      params.append('seriesId', item.id);
      this.$axios({
        method: 'post',
        url:'gp/declaration/getModelList',
        data:params,
      }).then((res)=>{
        if(res.data.statusCode==200){
        this.carModelList=res.data.object;
      }
    })
    },
    handlSelect(item){
      const carModel=this.carBrandName+'>'+this.carXiName+'>'+item.name
      this.$router.push({path:'/report-center',query: {carModel:carModel}})

    },
    handleFilter: function (index, listIndex, item) {
      this.carBrandName=item.name;
      this.curIndex=[];
      for (var i = 0; i < this.carList.length; i++) {
        //放入数组
        this.curIndex.push(-1);
      }
      this.curIndex.splice(listIndex, 1, index);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .chexing{
    width:80%;
    height: 100%;
    overflow: auto;
  }

  .app-brand-list .mint-indexlist-nav{
    width: 40px;
  }
  .app-brand-list .mint-indexlist-navitem{
    padding:3px 6px;
    font-size: 14px;
  }
 .app-brand-list .mint-cell{
    display: block;
   padding:16px 0;
   min-height:inherit;
   border-bottom:1px solid #eee;
  }

  .app-brand-list .mint-cell.active .factory-list{
    display: block;
  }
  .app-brand-list .mint-cell-wrapper{
    background:none;
    display: block;
    padding-right:0;
  }
  .mint-cell-value{
    display: block;
  }
  .factory-list{
    display: none;
    margin: 0;
    padding:16px 0 0;
    font-size: 14px;
  }
  .factory-header,.model-header{
    background:#f5ebeb;
    padding:14px 4px;
    color:#c34853
  }
  .factory-item,.model-item{
    position: relative;
    margin:0px;
    padding:14px 26px 14px 12px;
    border-bottom:1px solid #eee;
  }
  .factory-item:after,.model-item:after{
    border: 2px solid #c8c8cd;
    border-bottom-width: 0;
    border-left-width: 0;
    content: " ";
    top: 50%;
    right: 20px;
    position: absolute;
    width: 5px;
    height: 5px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }
  .factory-item:last-child{
    border-bottom:none;
  }
  .model-list{
    margin: 0;
    padding:16px 0 0;
    font-size: 14px;
  }
</style>
